import {useCallback, useRef, useState} from 'react';
import {GridOne} from '../../../components';
import {BindItem, BtnItem} from '../../../mobx/home';
import BtnListDom from './BtnListDom';
import {FeaturedRankList} from '../../../services';

interface ModelFiveProps {
  Title: string;
  bindList: BindItem[];
  btnList: BtnItem[];
  navigation?: any;
  typeId?: number;
  tempType: number;
  scrollToTop?: any;
}

const ModelFive = (props: ModelFiveProps) => {
  const {Title, bindList, navigation, typeId, scrollToTop, btnList} = props;

  const idxRef = useRef(2);
  const [list, setList] = useState([]);

  const changeData = useCallback(() => {
    FeaturedRankList({
      Type: typeId,
      PageIndex: idxRef.current,
      PageSize: bindList?.length,
    })
      .then((res: any) => {
        if (Array.isArray(res?.Data) && res?.Data?.length > 0) {
          idxRef.current += 1;
          setList(res.Data);
        } else {
          throw new Error('');
        }
      })
      .catch(() => {
        idxRef.current = 2;
      });
  }, [typeId, bindList?.length]);

  return (
    <>
      <GridOne
        list={list.length > 0 ? list : bindList}
        navigation={navigation}
      />
      <BtnListDom
        list={btnList}
        scrollToTop={scrollToTop}
        navigation={navigation}
        idx={typeId}
        Title={Title}
        changeData={changeData}
      />
    </>
  );
};

export default ModelFive;
